<template>
	<view class="john-electric">
		<view class="electric-percentage" :style="{width: percentage + '%'}">
			
		</view>
		<view class="electric-spot"></view>
	</view>
</template>

<script>
	export default {
		name:"JohnElectric",
		props: {
			percentage: {
				type: String,
				default: 0
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped lang="scss">
	.john-electric {
		border: 1px solid #445CDF;padding: 2rpx;position: relative;width: 48rpx;height: 24rpx;display: inline-block;
		.electric-percentage {background-color: #445CDF;height: 100%;}
		.electric-spot {position: absolute;right: 0;top: 50%;transform: translate(100%, -50%);background-color: #445CDF;width: 8rpx;height: 12rpx;}
	}
</style>
